html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}

html.dark {
    color-scheme: dark;
}

html.dark body {
    background-color: black;
}

html.dark .textview {
    filter: invert();
}

html.dark .htmlview:not(.supports-dark-mode), html.dark .plaintextview {
    filter: invert();
}

html.dark .splitpanes__splitter {
    filter:invert();
}

    #app-root {
        width: 100%;
        height: 100%;
    }

.el-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    align-items: stretch;
}

.el-tab-pane {
    flex: 1 0 0;
    overflow: auto;
}

.el-tabs__content {
    flex-grow: 1;
    display: flex;
}

.el-table__body-wrapper {
    overflow: visible !important;
}

.messagelist, .messageview, .sessionlist, .headers {
    display: flex;
    flex-direction: column;
}

.messagelist, .sessionlist {
    gap: 6px;
}

.el-table {
}

.messagelist .table, .sessionlist .table, .headers .table {
    overflow-y: auto;
    overflow-x: auto;
    flex: 1;
}

.vfillpanel {
    display: flex;
    flex-direction: row;
    align-content: stretch;
    justify-content: space-between;
}

.hfillpanel {
    display: flex;
    flex-direction: column;
    align-content: stretch;
    justify-content: space-between;
}


    .hfillpanel > .fill, .hfillpanel > .fillhalf {
        flex: 1 0 0;
        overflow: auto;
        box-sizing: border-box;
    }

.vfillpanel > .fill, .vfillpanel > .fillhalf {
    flex: 1 0 0;
    overflow: auto;
    box-sizing: border-box;
}

    .vfillpanel > .fill:not(:first-of-type), .vfillpanel > .fillhalf:not(:first-of-type) {
        margin-left: 16px;
    }

.hfillpanel:not(.nogap) > .fill:not(:first-of-type), .hfillpanel > .fillhalf:not(:first-of-type) {
    margin-top: 16px;
}

.vfillpanel > .fill:first-of-type, .vfillpanel > .fillhalf:first-of-type {
    margin-left: 0;
}

.hfillpanel > .fill:first-of-type, .hfillpanel > .fillhalf:first-of-type {
    margin-top: 0;
}







.centrecontents {
    display: flex;
    align-items: center;
    align-content: center;
    flex-direction: column;
    align-self: center;
}

.pad {
    padding: 6px;
}

.nopad {
    padding: 0;
}

iframe {
    border-width: 0;
}

[v-cloak] {
    display: none
}

.messageviewheader p {
    margin: 0 0 0.5em 0;
}

.messageviewheader p:not(.expanded) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: zoom-in;
}

.messageviewheader p.expanded {
    word-wrap: anywhere;
    cursor: zoom-out;
}

.sessionviewheader td {
    padding: 5px;
    vertical-align: top;
}

.nodetails {
    color: #5e7382;
    text-align: center;
}

tr.error td {
    background-color: rgba(255, 73, 73, 0.40);
}

pre.source code {
    overflow: auto;
    text-wrap: none;
}

.messagelist tr.unread {
    font-weight: bold;
}


.el-main {
    padding: 3px !important;
}

.el-header {
    padding-left: 5px !important;
}

.splitpanes.default-theme .splitpanes__pane {
    background-color: transparent !important;
}

.toolbar {
    display: flex;
    flex: 0 0 content;
    flex-wrap: wrap;
    column-gap: 6px;
    row-gap: 6px;
    align-items: start;
    padding-right: 12px;
    padding-bottom: 12px
}

.el-form-item__content {
    column-gap: 6px;
    row-gap: 6px;
}

.el-form-item--small {
    margin-bottom: 6px !important;
}
